<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
</head>

<body>
    <!-- 注释快捷键（添加和删除）：ctrl+/ -->
    <!-- 标题标签 -->
    <!-- h1+h2+h3+....+hn建立n个hn -->
    <!-- h1*n,建立n个h1 -->
    <a href="#bottom" id="bt1">跳到底部</a>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <!-- 1、段落标签 -->
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <!--2、水平线 -->
    <hr>
    <!-- 3、红色代表废弃，但是依旧可以使用 -->
    <hr width="500" color="red" size="50" align="left">
    <!--4、换行 -->
    文字1<br>文字2<br>文字3<br>文字4<br>文字5<br>文字6<br <!-- 格式化效果 -->
    <!-- 5、加粗 -->
    <b>郑世豪</b>
    <strong>宫瑞</strong><br>
    <!--6、斜体、倾斜 -->
    <i>i的斜体效果</i>
    <em>em的斜体效果</em><br>
    <!-- 7、删除线的效果 -->
    <s>s删除线</s>
    <del>del删除线</del><br>
    <!--8、下划线 -->
    <u>u下划线</u>
    <ins>ins下划线</ins><br>
    <!--9、上标 -->
    2<sup>5</sup><br>
    <!--10、下标 -->
    log<sub>3</sub><br>
    <!--11、图像标签
        src:图片从哪里来 
    -->
    <img src="../img/touxiang.png" alt="seti" title="腕豪" width="300" border="1"><br>
    <!--12、超链接a -->
    <a href="./界面.html">链接名字</a><br>
    <!-- 空连接 -->
    <a href="#">回不来咯</a><br>
    <!-- 外部链接 -->
    <a href="https://www.baidu.com/">百度一下</a><br>
    <!-- 图像链接 -->
    <a href="https://www.bilibili.com/">
        <img src="../img/touxiang.png" width="100">
    </a><br>
    <!-- 13、锚链接 -->
    <a href="#bt1" id="bottom">跳到顶部</a><br>
    <a href="./界面.html#db">去另一个页面的底部</a><br>
    <!-- 14、特殊字符 -->
    &lt;&yen;&copy;&reg;&hearts;
    文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字<br>
    <!-- 15、路径 -->
    <img src="../img/touxiang.png" alt=""><br>
    <!-- 16、div和span标签 -->
    <div>div是:一行中显示一个,块级标签</div>
    <div>div是:一行中显示一个,块级标签</div>
    <span>span是:一行中可以有多个,行标签</span>
    <span>span是:一行中可以有多个,行标签</span>
    <span>span是:一行中可以有多个,行标签</span>
    <span>span是:一行中可以有多个,行标签</span><br>
</body>

</html>